<template>
	<view class="content">
		<u-navbar title="提现" :autoBack="true">
		</u-navbar>
		<view class="top">
			<text>账户可提现余额：</text>
			<text>{{ money }}元</text>
		</view>

		<view class="info">

			<view class="c1">本次提现金额</view>
			<view class="c1" style="margin-top: 16rpx; padding-top: 2rpx;margin-bottom:12rpx;color: #B8BEC7;line-height: 36rpx;">(每月提现不超过3次，每次在1号，11号，21号前后到帐)</view>
			<view class="c2">
				<u--input type='number' v-model='row.amount' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>

			<view class="c1">银行</view>
			<view class="c2">
				<u--input v-model='row.bank_name' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>

			<view class="c1">卡号</view>
			<view class="c2">
				<u--input v-model='row.bank_card' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>

			<view class="c1">真实姓名</view>
			<view class="c2">
				<u--input v-model='row.realname' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>

			<view class="c1">手机号码</view>
			<view class="c2">
				<u--input v-model='row.phone' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>

			<view class="but">
				<view class="s2" @click="onSend()">
					<text>提现申请</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				money: 0,
				row: {
					amount: '',
					bank_name: '',
					bank_card: '',
					realname: '',
					phone: '',
				}
			};
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$API.getMerchantCount().then(res => {
					this.info = res.data;
					this.$u.vuex('vuex_user', res.data.userInfo);
					this.money = this.info.userInfo.all_withdraw_money - this.info.userInfo.done_withdraw_money
				})
			},
			onSend() {
				let that = this
				if (this.money < this.row.amount) {
					uni.$u.toast('余额不足')
					return
				}
				this.$API.sendMerchantRequest(this.row).then(res => {
					uni.showModal({
						content: '提现成功，请等待审核',
						showCancel: false,
						success: function() {
							that.vuex_user.money = res.data.money;
							that.$u.vuex('vuex_user', that.vuex_user);
							uni.navigateTo({
								url: '/pages/merchant/index',
							})
						}
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 670rpx;
		margin: 0 auto;
	}

	.top {
		width: 590rpx;
		padding: 52rpx 40rpx;
		margin-top: 52rpx;
		background-color: #fff;
		border-radius: 48rpx;
		height: 48rpx;
		font-size: 36rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;

		text {
			&:nth-child(2) {
				color: #7677EB;
			}
		}
	}

	.info {
		width: 590rpx;
		padding: 52rpx 40rpx;
		margin: 52rpx auto;
		background-color: #fff;
		border-radius: 48rpx;
		@include flex(column);

		.c1 {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 28rpx;
			margin-top: 56rpx;
		}

		.c2 {
			width: 566rpx;
			margin-top: 40rpx;

			/deep/ .u-input {
				height: 98rpx;
				border-radius: 28rpx;
			}
		}

	}


	.but {
		@include flex;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			margin: 0 auto;
			text-align: center;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
</style>